<template>
  <el-dialog title="删除部门" width="400px" :visible.sync="visible" append-to-body>
    <div class="org-delete-dept-madal-box">
      <span>确定删除该部门吗？如果该部门有员工存在，需要先移除 该部门下的员工，再删除该部门！</span>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        currId: 0,
      };
    },

    methods: {
      onOpen(data) {
        const { id } = data;
        this.currId = id;
        this.visible = true;
      },
      close() {
        this.visible = false;
        this.currId = 0;
      },
      save() {
        this.$store.dispatch('organization/deleteTreeNode', this.currId);
        this.close();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-delete-dept-madal-box {
    color: #b4b8be;
  }
</style>
